<template>
	<view class="device-overview">
		<!-- 设备信息 -->
		<view class="info-list">
			<view class="info-row">
				<view class="row-label">设备ID：</view>
				<view class="row-value">{{deviceInfo.id}}</view>
			</view>
			<view class="info-row">
				<view class="row-label">设备名称：</view>
				<view class="row-value">{{deviceInfo.name}}</view>
			</view>
			<view class="info-row">
				<view class="row-label">序列号：</view>
				<view class="row-value">{{deviceInfo.serialNumber}}</view>
			</view>
			<view class="info-row">
				<view class="row-label">设备类型：</view>
				<view class="row-value" v-if="deviceInfo.deviceType">{{deviceInfo[modeName[deviceInfo.deviceType]].name}}</view>
			</view>
			<view class="info-row">
				<view class="row-label">所属机柜：</view>
				<view class="row-value">{{deviceInfo.rackName}}</view>
			</view>
			<view class="info-row" v-if="deviceInfo.deviceType==1">
				<view class="row-label">主机模式：</view>
				<view class="row-value">{{deviceInfo.type==0?'单配':'双配'}}</view>
			</view>
			<view class="info-row" v-if="deviceInfo.deviceType==1">
				<view class="row-label">ip地址：</view>
				<view class="row-value">{{deviceInfo.ip}}</view>
			</view>
			<view class="info-row" v-if="deviceInfo.deviceType==3">
				<view class="row-label">配线架类型：</view>
				<view class="row-value">{{deviceInfo.linkDeviceType==1?'普通':'电子'}}</view>
			</view>
			<view class="info-row">
				<view class="row-label">备注：</view>
				<view class="row-value">{{deviceInfo.remark}}</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	const $props = defineProps({
		deviceInfo:{
			type: Object,
			default: () => {}
		}
	})

const modeName = {
	1: 'deviceModelImu',
	2: 'deviceModelSwitch',
	3: 'deviceModelDistributionFrame',
	5: 'deviceModelAp',
}
</script>

<style lang="scss" scoped>
.device-overview{
	width: 100%;
	.info-list{
		width: 100%;
		.info-row{
			box-sizing: border-box;
			width: 100%;
			height: 59rpx;
			padding: 0 40rpx;
			display: flex;
			align-items: center;
			&:nth-child(odd){
				background-color: #F9FBFD;
			}
			.row-label{
				width: 126rpx;
				font-size: 23rpx;
				color: #7E8CA0;
				margin-right: 24rpx;
			}
			.row-value{
				width: calc(100% - 160rpx);
				font-size: 23rpx;
				color: #262D37;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}
	}
}
</style>